<template>
  <div class="back">
    <div class="temp">
      <img class="login-back" src="../assets/images/login-back.png" alt="">
    </div>
    <div class="login-box">
      <el-form ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules">
        <h3 class="login_title">宠物领养后台系统登录</h3>
        <el-form-item label="" prop="username">
          <el-input clearable v-model="form.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input clearable type="password" v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="submit" class="btn" type="primary" :loading="loading">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import Cookie from 'js-cookie';
import { login } from '@/api/admin.js';
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, trigger: 'blur', message: '请输入账号' }
        ],
        password: [
          { required: true, trigger: 'blur', message: '请输入密码' }
        ]
      },
      loading: false
    }
  },
  methods: {
    // 登录
    submit() {
      // 校验通过
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          login(this.form).then((data) => {
            if (data.code == 0) {
              Cookie.set('token', data.result.token);
              Cookie.set('userInfo', JSON.stringify(data.result.userInfo));
              this.$store.commit('setMenu', data.result.menu);
              this.$store.commit('addMenu', this.$router);
              this.$store.commit('selectMenu', '/home');
              this.$router.push('/home');
            }
          }).finally(() => {
            this.loading = false;
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.back {
  width: 100%;
  height: 100%;

  display: flex;

}

.temp {
  width: 50%;
  height: 100%;
  position: relative;
  background-image: url('../assets/login-bg.svg');
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;

  .login-back {
    width: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.login-box {
  width: 50%;
  height: 100%;
  position: relative;

  .login-container {
    padding: 30px 30px 10px 30px;
    box-sizing: border-box;
    position: absolute;
    left: 40%;
    top: 40%;
    transform: translate(-50%, -50%);

    .login_title {
      margin-bottom: 30px;
      text-align: left;
    }

    .el-input {
      width: 318px;
    }

    .btn {
      width: 318px;
      // margin-left: 70px;
    }
  }
}
</style>